<template>
	<view class="customer-level-table">
		<!-- 表格标题 -->
		<view class="table-title">客户等级变化分析</view>

		<!-- 表格容器 -->
		<view class="table-container">
			<!-- 表头 -->
			<view class="table-header">
				<view class="header-cell corner-cell">上月等级/当月等级</view>
				<!-- <view class="header-cell">当月等级</view> -->
				<view class="header-cell">核心</view>
				<view class="header-cell">重要</view>
				<view class="header-cell">一般</view>
				<view class="header-cell">合计</view>
			</view>

			<!-- 表格内容 -->
			<view class="table-body">
				<view v-for="(row, index) in tableData" :key="index" class="table-row"
					:class="{ 'total-row': row.lastMonth === '合计' }">
					<view class="row-header">{{ row.lastMonth }}</view>
					<view v-for="(value, key) in row" :key="key" v-if="key !== 'lastMonth'"
						:class="getCellClass(key, row.lastMonth)">
						{{ value }}
					</view>
				</view>
			</view>
		</view>

		<!-- 表格说明 -->
		<view class="table-description">
			<text class="description-text">数据统计时间：{{ currentDate }}</text>
		</view>

		<!-- 刷新按钮 -->
		<view class="refresh-section">
			<button class="refresh-btn" @click="refreshData">刷新数据</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'CustomerLevelTable',
		data() {
			return {
				currentDate: '2023年12月',
				tableData: [{
						lastMonth: '核心',
						core: 46,
						important: 324,
						general: 43,
						total: 413
					},
					{
						lastMonth: '重要',
						core: 21,
						important: 334,
						general: 334,
						total: 689
					},
					{
						lastMonth: '一般',
						core: 52,
						important: 245,
						general: 666,
						total: 963
					},
					{
						lastMonth: '合计',
						core: 119,
						important: 903,
						general: 1043,
						total: 2065
					}
				]
			}
		},

		methods: {
			// 获取单元格样式类
			getCellClass(key, rowType) {
				if (rowType === '合计') {
					return key === 'total' ? 'grand-total-cell' : 'total-cell';
				} else {
					return key === 'total' ? 'total-cell' : 'data-cell';
				}
			},

			// 刷新数据（模拟）
			refreshData() {
				uni.showLoading({
					title: '刷新中...'
				});

				setTimeout(() => {
					// 模拟数据更新
					this.tableData.forEach(row => {
						if (row.lastMonth !== '合计') {
							// 为每个数据添加随机变化
							Object.keys(row).forEach(key => {
								if (key !== 'lastMonth') {
									const change = Math.floor(Math.random() * 10) -
										5; // -5到+5的随机变化
									row[key] = Math.max(0, row[key] + change);
								}
							});
						}
					});

					// 重新计算合计行
					this.calculateTotals();

					uni.hideLoading();
					uni.showToast({
						title: '数据已更新',
						icon: 'success'
					});
				}, 1000);
			},

			// 计算合计行
			calculateTotals() {
				const totals = {
					core: 0,
					important: 0,
					general: 0,
					total: 0
				};

				// 只计算前3行（排除合计行）
				for (let i = 0; i < 3; i++) {
					totals.core += this.tableData[i].core;
					totals.important += this.tableData[i].important;
					totals.general += this.tableData[i].general;
					totals.total += this.tableData[i].total;
				}

				// 更新合计行
				this.tableData[3].core = totals.core;
				this.tableData[3].important = totals.important;
				this.tableData[3].general = totals.general;
				this.tableData[3].total = totals.total;
			}
		},

		mounted() {
			this.calculateTotals();
		}
	}
</script>

<style lang="scss" scoped>
	.customer-level-table {
		background: white;
		border-radius: 8px;
		padding: 20rpx;
		margin: 20rpx;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.table-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		text-align: center;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #f0f0f0;
	}

	.table-container {
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		overflow: hidden;
	}

	.table-header {
		display: flex;
		background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
		color: white;
		font-weight: 500;
	}

	.header-cell {
		flex: 1;
		padding: 20rpx 10rpx;
		text-align: center;
		font-size: 28rpx;
		border-right: 1px solid rgba(255, 255, 255, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header-cell:last-child {
		border-right: none;
	}

	.corner-cell {
		flex: 0 0 150rpx;
		/* 固定宽度 */
		background: rgba(0, 0, 0, 0.1);
		font-weight: 600;
	}

	.table-body {
		background: white;
	}

	.table-row {
		display: flex;
		border-bottom: 1px solid #f0f0f0;
	}

	.table-row:last-child {
		border-bottom: none;
	}

	.row-header {
		flex: 0 0 150rpx;
		/* 固定宽度，与表头对齐 */
		padding: 20rpx 10rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		background: #fafafa;
		border-right: 1px solid #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.data-cell {
		flex: 1;
		padding: 20rpx 10rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		border-right: 1px solid #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.data-cell:last-child {
		border-right: none;
	}

	.total-cell {
		flex: 1;
		padding: 20rpx 10rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		color: #1890ff;
		background: #f0f8ff;
		border-right: 1px solid #e6f7ff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.total-row .row-header {
		background: #f0f8ff;
		color: #1890ff;
		font-weight: 600;
	}

	.grand-total-cell {
		flex: 1;
		padding: 20rpx 10rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 600;
		color: #fff;
		background: #1890ff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.table-description {
		margin-top: 20rpx;
		text-align: center;
	}

	.description-text {
		font-size: 24rpx;
		color: #999;
	}

	// /* 响应式设计 */
	// @media (max-width: 750px) {
	// 	.customer-level-table {
	// 		margin: 10rpx;
	// 		padding: 15rpx;
	// 	}

	// 	.header-cell,
	// 	.row-header,
	// 	.data-cell,
	// 	.total-cell {
	// 		padding: 15rpx 8rpx;
	// 		font-size: 24rpx;
	// 	}

	// 	.corner-cell,
	// 	.row-header {
	// 		flex: 0 0 120rpx;
	// 		/* 移动端稍窄一些 */
	// 	}
	// }

	/* 动画效果 */
	.table-row {
		transition: all 0.3s ease;
	}

	.table-row:hover {
		background: #f5f5f5;
	}

	.data-cell:hover,
	.total-cell:hover {
		background: #e6f7ff;
		transform: scale(1.05);
	}

	/* 样式与第一个版本相同，添加刷新按钮样式 */
	.refresh-section {
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
	}

	.refresh-btn {
		background: #1890ff;
		color: white;
		border: none;
		border-radius: 6rpx;
		padding: 15rpx 30rpx;
		font-size: 28rpx;
	}
</style>